<template>
  <div>
    <el-form ref="dynamicLegalCreate" :inline="true" :model="selectData" :validate-on-rule-change="false" :rules="rules" :hide-required-asterisk="hideRequiredAsterisk" :label-position="showMobilePage?'left':labelPosition" :label-width="labelWidth" :class="{'mobile-legal-create': showMobilePage}" class="legal-module-wrap legal-form-box-right">
      <div v-for="construct in constructions" :key="construct.key" class="legal-module">
        <x-title v-if="construct.title" :title="construct.title" :style="construct.titleStyle">
          <div v-if="construct.customBtn" class="options-btn-group">
            <el-button size="small" type="primary" class="option-btn" @click="onAddClick">添加<i class="el-icon-plus" /></el-button>
          </div>
        </x-title>
        <div class="legal-module-item">
          <template v-for="child in construct.children">
            <template v-for="item in child">
              <div
                v-if="(item.type !== 'radio' || (item.type === 'radio' && showRadioItem(selectData[item.module].type, item.showContractType))) &&
                ((item.type !== 'input') || item.status !== 'number' || (item.type === 'input' && item.status === 'number' && showItemByType(selectData[item.module].type, item.showContractType, item.label)))"
                :key="item.key"
                :class="{
                  'legal-module-fill-line': item.isFillLine,
                  'legal-module-line-feed': item.lineFeed,
                  'legal-module-row': !item.isFillLine,
                  'legal-module-row-start': item.isFlexStart,
                  'legal-module-contract-label-width': item.isContractInfo,
                  'legal-module-create-label-width': item.isCreateInfo,
                  'label-sticky-top': setLabelTopStatus(item.type),
                  'two-col-box': setTwoColBox(item.type),
                  'gray-label': item.type === 'preText' || item.type === 'legalTypeText',
                  'hide-item': showMobilePage && item.type === 'input' && !showItemByType(selectData[item.module].type, item.showContractType, item.label)
                }"
              >
                <!-- 创建人信息中的 输入框 -->
                <el-form-item v-if="item.type === 'preInput'" :label="item.label" :prop="item.module + '.' + item.key" :key="item.key" class="pre-input-item">
                  <!-- <select-group-prepend :label="item.label" :required="item.required" class="short-input"> -->
                  <el-input v-model="selectData[item.module][item.key]" :disabled="item.disabled" :maxlength="saveGetData(item, 'maxlength', false)" :placeholder="item.placeholder" />
                <!-- </select-group-prepend> -->
                <!-- <el-input v-model="selectData[item.module][item.key]" :placeholder="item.placeholder">
                <template slot="prepend">{{ item.label }}</template>
              </el-input> -->
                </el-form-item>
                <!-- 创建信息中的 下拉选择 -->
                <el-form-item v-if="item.type === 'preDeptSelect'" :label="item.label" :prop="item.module + '.' + item.key" :key="item.key" class="pre-input-item">
                  <!-- <select-group-prepend :required="item.required" :label="item.label" class="short-input"> -->
                  <!-- <el-select slot="select" v-model="selectData[item.module][item.key]" :placeholder="item.placeholder" popper-class="global-select-down" >
                  <el-option
                    v-for="item in deptOption"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id" />
                </el-select> -->
                  <el-cascader
                    v-model="selectData[item.module][item.key]"
                    :show-all-levels="false"
                    :options="deptTreeList"
                    :props="{
                      emitPath:false,
                      value: 'id',
                      label: 'name',
                      checkStrictly: true,
                      multiple: false,
                    }"
                    class="width240"
                    placeholder="请选择"
                    size="small"
                    collapse-tags
                    filterable
                    clearable
                  >
                    <template slot-scope="{ data }">
                      <ToolTip v-if="data.name.length > 14" :content="data.name"/>
                      <span v-else>{{ data.name }}</span>
                    </template>
                  </el-cascader>
                <!-- </select-group-prepend> -->
                </el-form-item>
                <!-- 创建信息中的 人员选择 -->
                <el-form-item v-if="item.type === 'prePersonSelect'" :label="item.label" :prop="item.module + '.' + item.key" :key="item.key" class="pre-input-item">
                  <SelectWithUserLoad
                    v-model="selectData[item.module][item.key]"
                    :default-list="defaultList[item.module + '.' + item.key ] || []"
                    :value-type="'object'"
                    :key-name="item.selectKeyName"
                    :label-name="item.selectLabelName"
                    :disabled="item.disabled"
                    :show-check-user="item.showCheckUser"
                    filterable
                    collapse-tags
                    clearable
                    @changeMethod="changeMethod($event, item)"
                  />
                <!-- </select-group-prepend> -->
                </el-form-item>
                <!-- 创建人信息中的 纯文本展示类 -->
                <el-form-item v-if="item.type === 'preText'" :key="item.key" :label="item.label + ':'" :label-width="saveGetData(item, 'labelWidth', '')" class="pre-input-item">
                  <div class="text-content">{{ selectData[item.module][item.key] || '--' }}</div>
                </el-form-item>
                <!-- 合同类型 展示类 -->
                <el-form-item v-if="item.type === 'legalTypeText'" :key="item.key" :label="item.label + ':'" :label-width="item.labelWidth" class="normal-form-item" style="margin-top: 0.65em">
                  <div :class="`contract-type-${selectData[item.module][item.key]}`" class="contract-type">{{ selectData[item.module][item.key] | setLegalTypeState }}</div>
                </el-form-item>
                <!-- 输入框 -->
                <el-form-item v-if="item.type === 'input' && !item.status" :prop="item.module + '.' + item.key" :label-width="saveGetData(item, 'labelWidth', '')" :key="item.key" :label="item.label" :style="formWidth ? {width: formWidth} : {}" class="normal-form-item">
                  <template slot="label">
                    <ToolTip v-if="item.tip" :content="item.tip">
                      <tipIcon is-diy style="margin: 2px 4px 0 0;" />
                    </ToolTip>
                    <span>{{ item.label }}</span>
                  </template>
                  <el-input
                    v-model="selectData[item.module][item.key]"
                    :disabled="item.disabled"
                    :maxlength="saveGetData(item, 'maxlength', false)"
                    :placeholder="item.placeholder"
                    :type="item.onlyNumber ? 'number' : 'text'"
                    :oninput="selectData[item.module][item.key] && item.onlyNumber && item.maxlength && (selectData[item.module][item.key] = selectData[item.module][item.key].slice(0, item.maxlength))"
                  />
                <!-- <span v-if="item.tip" class="tip">{{ item.tip }}</span> -->
                </el-form-item>
                <!-- 下拉选择 -->
                <el-form-item v-if="item.type === 'select' && (!isPartTimeWorker || (isPartTimeWorker && item.key !== 'tempSource'))" :prop="item.module + '.' + item.key" :key="item.key" :label-width="saveGetData(item, 'labelWidth', '')" :label="item.label" :style="formWidth ? {width: formWidth} : {}" class="normal-form-item">
                  <ToolTip v-if="getSelectTip(selectData[item.module][item.key], item.option)" :content="getSelectTip(selectData[item.module][item.key], item.option)">
                    <el-select v-model="selectData[item.module][item.key]" :disabled="item.disabled" :placeholder="item.placeholder" clearable popper-class="global-select-down panel-auto-width" >
                      <el-option
                        v-for="item in item.option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </ToolTip>
                  <el-select v-else v-model="selectData[item.module][item.key]" :disabled="item.disabled" :placeholder="item.placeholder" clearable popper-class="global-select-down panel-auto-width" >
                    <el-option
                      v-for="item in item.option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
                <!-- 多行文本框 -->
                <el-form-item v-if="item.type === 'textarea'" :key="item.key" :label="item.label" :prop="item.module + '.' + item.key" :label-width="item.labelWidth" :class="{'mobile-create-flex': showMobilePage}" class="form-textarea">
                  <el-input
                    v-model="selectData[item.module][item.key]"
                    :maxlength="item.maxlength"
                    :placeholder="item.placeholder"
                    :disabled="item.disabled"
                    type="textarea"
                    row="5"
                    resize="none"
                  />
                </el-form-item>
                <el-form-item v-if="item.type === 'switch'" :key="item.key" :label="item.label" :label-width="item.labelWidth">
                  <el-switch
                    v-model="selectData[item.module][item.key]"
                    @change="handleSwitchChange"
                  />
                </el-form-item>
                <!--GMV分成比例 -->
                <el-form-item v-if="item.type === 'GMVRate'" :key="item.key" :prop="item.module + '.' + item.key" :label="item.label" :label-width="item.labelWidth" :class="{'mobile-create-flex': showMobilePage}" class="form-textarea GMV-class">
                  <el-input
                    v-model.trim="selectData[item.module][item.key]"
                    :maxlength="item.maxlength"
                    :placeholder="item.placeholder"
                    :disabled="item.disabled"
                    type="textarea"
                    row="5"
                    resize="none"
                  />
                  <el-tooltip :open-delay="800" placement="top" effect="dark" content="点击自动回填GMV模板内容">
                    <img :src="templateIcon" class="template-icon" @click="GMVTemplate(item)">
                  </el-tooltip>
                </el-form-item>
                <!-- 合同日期模块 参考渠道采买类 -->
                <el-form-item v-if="item.type === 'legalDate'" :prop="item.module + '.' + item.key + '.type'" :key="item.key" :label="item.label" :class="{'mobile-create-flex': showMobilePage}">
                  <div class="legal-date-module">
                    <el-radio-group v-model="selectData[item.module][item.key].type" class="legal-date-radio-group" @change="legalDateTypeChange($event, item)">
                      <el-radio :label="1" :disabled="item.disabled"><span style="font-size:13px;">年框类</span></el-radio>
                      <el-radio :label="2" :disabled="item.disabled"><span style="font-size:13px;">单次类</span></el-radio>
                    </el-radio-group>
                    <period-of-year v-if="selectData[item.module][item.key].type === 1" v-model="selectData[item.module][item.key]" :rules="rules" :legal-type="selectData['contractInfo']['type']" :module-name="item.module + '.' + item.key" />
                    <period-of-single v-else v-model="selectData[item.module][item.key]" :rules="rules" :module-name="item.module + '.' + item.key" />
                  </div>
                </el-form-item>
                <!-- 合同编码模块 -->
                <el-form-item v-if="item.type === 'legalCode'" :key="item.key" :label="item.label" :prop="item.module + '.' + item.key" style="flex: 1">
                  <legal-code-input v-model="selectData[item.module][item.key]" />
                </el-form-item>
                <!-- 文件上传 -->
                <el-form-item v-if="item.type === 'fileUpload'" :key="item.key" :label="item.label" :prop="item.module + '.' + item.key" :class="{'mobile-create-flex':type !== CONTRACT_TYPE.HISTORY && showMobilePage}">
                  <up-attachment
                    :import-api="'/common/file/upload'"
                    :hide-confirm="true"
                    :file-list="selectData[item.module][item.key]"
                    :limit="saveGetData(item, 'limitFileNum', 10)"
                    :style="{position: item.label === '合同附件' && 'relative'}"
                    btn-text="上传文件"
                    style="margin-top: 0.2em"
                    class="mobile-components"
                    @complateSetData="complateSetData($event, item)"
                    @removeFileList="removeFileList($event, item)"
                  />
                  <div v-if="item.label === '合同附件' && !item.hidePanel" class="template-download">
                    <div class="download-box">
                      <div class="download-title" @click="showTemplateDrawer"><i class="el-icon-document" />下载合同模板</div>
                      <div v-if="showTemplatePanel && lastTemplate.id" class="download-content-box">
                        <div class="download-content">
                          <div class="flex-center">
                            <div class="label">上次使用:</div>
                            <ToolTip :content="lastTemplate.fileName" is-can-click @handelClick="showPreviewDrawer" />
                          </div>
                          <div class="flex-center">
                            <div class="label">下载:</div>
                            <el-button :loading="downloadLoading" type="info" size="mini" @click="downloadTemplate(true)">填充模板</el-button>
                            <el-button :loading="downloadLoading" type="info" size="mini" @click="downloadTemplate(false)">空模板</el-button>
                          </div>
                          <i class="el-icon-error close-icon" @click="showTemplatePanel = false" />
                        </div>
                      </div>
                    </div>
                  </div>
                </el-form-item>
                <!-- 三级城市筛选 -->
                <el-form-item v-if="item.type === 'cascader'" :key="item.key" :label="item.label" :prop="item.module + '.' + item.key" :style="formWidth ? {width: formWidth} : {}" class="normal-form-item">
                  <three-level-area :selected-options="selectData[item.module][item.key]" @update:options="threeLevelArea" />
                </el-form-item>
                <!-- 只数字的输入框 -->
                <el-form-item v-if="item.type === 'input' && item.status === 'number' && showItemByType(selectData[item.module].type, item.showContractType, item.label)" :prop="item.module + '.' + item.key" :key="item.key" :label="item.label" :style="formWidth ? {width: formWidth} : {}" class="normal-form-item">
                  <el-input
                    v-model="selectData[item.module][item.key]"
                    :disabled="item.disabled"
                    :placeholder="item.placeholder"
                    oninput="if(value>999999999999)value=999999999999"
                    type="number"
                    size="small"
                    @input="numberInputChange($event, selectData, item.module, item.key)"
                  />
                  <el-tooltip v-if="item.showTip" placement="top" popper-class="radio-tip">
                    <div slot="content" style="max-width: 200px;" v-html="item.tip" />
                    <tipIcon is-diy style="margin: -4px 0 0 4px;"/>
                  </el-tooltip>
                </el-form-item>
                <!-- 单选框类型 -->
                <el-form-item v-if="item.type === 'radio' && showRadioItem(selectData[item.module].type, item.showContractType)" :prop="item.module + '.' + item.key" :key="item.key" :label="item.label" :style="formWidth ? {width: formWidth} : {}" class="normal-form-item radio-item">
                  <el-radio-group v-model="selectData[item.module][item.key]" @change="radioSelChange(selectData, item, $event)">
                    <el-radio v-for="(val, j) in item.option" :key="j" :label="val.value">{{ val.label }}</el-radio>
                  </el-radio-group>
                  <el-tooltip v-if="item.showTip" placement="top" popper-class="radio-tip">
                    <div slot="content" style="max-width: 200px;" v-html="item.tip" />
                    <tipIcon is-diy style="margin: -4px 0 0 4px;"/>
                  </el-tooltip>
                </el-form-item>
                <!-- 日期选择 -->
                <el-form-item v-if="item.type === 'dateTime'" :prop="item.module + '.' + item.key" :key="item.key" :label="item.label" :style="formWidth ? {width: formWidth} : {}" class="normal-form-item date-time-picker">
                  <el-date-picker
                    v-model="selectData[item.module][item.key]"
                    :disabled="item.disabled"
                    type="date"
                    value-format="timestamp"
                    placeholder="选择日期"
                    format="yyyy/MM/dd" />
                </el-form-item>
                <!-- 时间范围选择 -->
                <el-form-item v-if="item.type === 'dateRangeTime'" :prop="item.module + '.' + item.key" :key="item.key" :style="formWidth ? {width: formWidth} : {}" class="normal-form-item">
                  <template slot="label">
                    <ToolTip v-if="item.tip" :content="item.tip || '起止日期'">
                      <tipIcon is-diy style="margin: 2px 4px 0 0;" />
                    </ToolTip>
                    <span>{{ item.label }}</span>
                  </template>
                  <date-range-picker v-model="selectData[item.module][item.key]" :disabled="item.disabled" :module-name="item.module + '.' + item.key" />
                </el-form-item>
                <el-form-item v-if="item.type === 'relevanceConstructCode'" :prop="item.module + '.' + item.key" :key="item.key" :label-width="saveGetData(item, 'labelWidth', '')" :label="item.label" style="width: 130%">
                  <template slot="label">
                    <div class="flex-center">
                      <ToolTip v-if="item.tip" :content="item.tip">
                        <tipIcon is-diy />
                      </ToolTip>
                      <span style="flex: 1">{{ item.label }}</span>
                    </div>
                  </template>
                <!--
                  关联合同编号
                  <relevan-construct v-model="selectData[item.module][item.key]" :tip="item.tip" :rules="rules" />
                -->
                </el-form-item>
                <!-- 参考授权单信息模块中的付授权模块 -->
                <el-form-item v-if="item.type === 'deadlineSelect'" :prop="item.module + '.' + item.key" :key="item.key" :label="item.label">
                  <deadline-select v-model="selectData[item.module][item.key]" :rules="rules" :module-name="item.module + '.' + item.key" />
                </el-form-item>
                <!-- 授权单信息模块中的付款期限模块 -->
                <el-form-item v-if="item.type === 'autorPayDeadline'" :prop="item.module + '.' + item.key + '.type'" :key="item.key" :label="item.label" :class="{'mobile-create-flex': showMobilePage}">
                  <div class="legal-date-module">
                    <el-radio-group v-model="selectData[item.module][item.key].type" class="legal-date-radio-group" @change="authorPayDateTypeChange($event, item)">
                      <el-radio :label="1" :disabled="item.disabled"><span style="font-size:13px;">基础授权使用费类</span></el-radio>
                      <el-radio :label="2" :disabled="item.disabled"><span style="font-size:13px;">提成类</span></el-radio>
                    </el-radio-group>
                    <base-author-royalty v-if="selectData[item.module][item.key].type === 1" v-model="selectData[item.module][item.key]" :rules="rules" :module-name="item.module + '.' + item.key" :show-mobile-page="showMobilePage"/>
                    <author-commission v-else v-model="selectData[item.module][item.key]" :module-name="item.module + '.' + item.key" />
                  </div>
                </el-form-item>
                <!-- 人事采购合同中的合作日期/付款方式模块 -->
                <el-form-item v-if="item.type === 'staffAdminCooperDate'" :prop="item.module + '.' + item.key + '.type'" :key="item.key" :label="item.label" :class="{'mobile-create-flex': showMobilePage}">
                  <div class="legal-date-module">
                    <el-radio-group v-model="selectData[item.module][item.key].type" class="legal-date-radio-group mobile-create-radio-group" @change="staffCooperDateTypeChange($event, item)">
                      <el-radio :label="1" :disabled="item.disabled"><span style="font-size:13px;">单次采买(产品/服务)类</span></el-radio>
                      <el-radio :label="2" :disabled="item.disabled"><span style="font-size:13px;">委托服务(附期限采购)类</span></el-radio>
                      <el-radio :label="3" :disabled="item.disabled"><span style="font-size:13px;">单次/框架销售类</span></el-radio>
                      <el-radio :label="4" :disabled="item.disabled">
                        <span style="display: inline-block; font-size:13px;">
                          兼职人员合作<InfoIcon class="radio-info-tip" content="仅人力资源部可发起该类型合同"/>
                        </span>
                      </el-radio>
                    </el-radio-group>
                    <staff-cooper-single-buy v-if="[1, 3].includes(selectData[item.module][item.key].type)" v-model="selectData[item.module][item.key]" :rules="rules" :module-name="item.module + '.' + item.key" />
                    <staff-entrust-service v-else-if="selectData[item.module][item.key].type === 2" v-model="selectData[item.module][item.key]" :rules="rules" :module-name="item.module + '.' + item.key" />
                  </div>
                </el-form-item>
                <!-- 第二类 签约对方 的选择组件 参考kol签约对方 -->
                <el-form-item v-if="item.type === 'oppCompanySelect'" :prop="item.module + '.' + item.key" :key="item.key" :show-message="false" :label="item.label">
                  <opp-company-select v-model="selectData[item.module]" :module-name="item.module" :query-all-supplier="!!item.showAllSupplier" />
                </el-form-item>
                <!-- 周期选择 -->
                <el-form-item v-if="item.type === 'otherSelectGroup'" :prop="item.module + '.' + item.key" :key="item.key" :label="item.label">
                  <other-select-group v-model="selectData[item.module][item.key]" :module-name="item.module + '.' + item.key" :type-field="item.typeField" :name-field="item.nameField" :options="item.options" :other-value="item.otherValue" :max-length="item.maxlength" :type-placeholder="item.typePlaceholder" :name-placeholder="item.namePlaceholder" :name-type="item.nameType" />
                </el-form-item>
                <!-- 合作平台 -->
                <el-form-item v-if="item.type === 'cooperAccountSelect'" :prop="item.module + '.' + item.key" :key="item.key" :label="item.label">
                  <cooper-account-select v-model="selectData[item.module][item.key]" :module-name="item.module + '.' + item.key" :rules="rules" />
                </el-form-item>
                <!-- kol类型：公司分成比例 -->
                <el-form-item v-if="item.type === 'companyRatioInput'" :prop="item.module + '.' + item.key" :key="item.key" :label="item.label">
                  <el-input v-model="selectData[item.module][item.key]" :maxlength="9" :placeholder="item.placeholder" class="width240" size="small" type="number" oninput="if(value>100)value=100;if(value<0)value=0;" @change="formatRatioVal($event, selectData, item.module, item.key, item.complementaryKey)">
                    <span slot="suffix" style="margin-right:5px;color:#333;">%</span>
                  </el-input>
                </el-form-item>
                <!-- kol类型：达人分成比例 -->
                <el-form-item v-if="item.type === 'talentRatioInput'" :prop="item.module + '.' + item.key" :key="item.key" :label="item.label">
                  <el-input v-model="selectData[item.module][item.key]" :maxlength="9" :placeholder="item.placeholder" :disabled="item.disabled" class="width240" size="small" type="number">
                    <span slot="suffix" style="margin-right:5px;color:#333;">%</span>
                  </el-input>
                </el-form-item>
                <!-- 复选框带输入框组件 看考kol类分成/收益功能 -->
                <el-form-item v-if="item.type === 'checkboxInputs'" :prop="item.module + '.' + item.key" :key="item.key" :label="item.label" :class="{'mobile-create-flex': showMobilePage}">
                  <checkbox-inputs v-model="selectData[item.module][item.key]" :module-name="item.module + '.' + item.key" :checkbox-group-field="item.checkboxGroupField" :input-items="item.inputItems" />
                </el-form-item>
                <!-- 电商模块 -->
                <e-commerce-group v-if="item.type === 'eCommerceGroup'" ref="commerceGroup" :key="item.key" v-model="selectData[item.module]" :rules="rules" :module-name="item.module" @validateField="validateField" />
                <!-- 分期时间选择 -->
                <el-form-item v-if="item.type === 'dateMulPicker'" :prop="item.module + '.' + item.key" :key="item.key" :label="item.label">
                  <date-mul-picker v-model="selectData[item.module][item.key]" :rules="rules" :module-name="item.module + '.' + item.key" target-field="payDate" />
                </el-form-item>
                <!-- 其他类-涉及金额 -->
                <el-form-item v-if="item.type === 'moneyInvolved'" :prop="item.module + '.' + item.key + '.isMoneyInvolved'" :key="item.key" :label="item.label" class="date-radio-label">
                  <div class="money-involved-box">
                    <el-radio-group v-model="selectData[item.module][item.key].isMoneyInvolved">
                      <el-radio :label="1" :disabled="item.disabled"><span style="font-size:13px;">是</span></el-radio>
                      <el-radio :label="0" :disabled="item.disabled"><span style="font-size:13px;">否</span></el-radio>
                    </el-radio-group>
                    <money-involved v-if="selectData[item.module][item.key].isMoneyInvolved === 1" v-model="selectData[item.module][item.key]" :rules="rules" :module-name="item.module + '.' + item.key" />
                  </div>
                </el-form-item>
                <el-form-item v-if="item.type === 'searchOption'" :label="item.label" :prop="item.module + '.' + item.key" :key="item.key" class="pre-input-item">
                  <div class="flex">
                    <el-tooltip v-if="getSearchOptionTip(selectData[item.module][item.key], item.selectLabelName)" :open-delay="300" placement="top">
                      <div slot="content" style="max-width: 200px;">{{ getSearchOptionTip(selectData[item.module][item.key], item.selectLabelName) }}</div>
                      <SelectWithUserLoad
                        ref="selectInputBlurRef"
                        v-model="selectData[item.module][item.key]"
                        :default-list="defaultList[item.module + '.' + item.key ] || []"
                        :value-type="'object'"
                        :key-name="`${item.selectKeyName}`"
                        :extend-key-name="`${item.selectTypeName}`"
                        :label-name="item.selectLabelName"
                        :disabled="item.disabled"
                        :loadmore-method="getSelectOtions()"
                        :extend-class="'panel-auto-width'"
                        :collapse-tags="false"
                        :custom-label="true"
                        :need-loadmore="item.loadmore"
                        :hide-select-list="selectData[item.module][item.key] ? [selectData[item.module][item.key]] : []"
                        filterable
                        clearable
                        open-tool-tip
                        class="mobile-components"
                        style="width: 200px;"
                        @change="selectItem($event, item)"
                        @searchKeyword="setItemLoadmore($event, item)"
                      />
                    </el-tooltip>
                    <SelectWithUserLoad
                      v-else
                      v-model="selectData[item.module][item.key]"
                      :default-list="defaultList[item.module + '.' + item.key ] || []"
                      :value-type="'object'"
                      :key-name="`${item.selectKeyName}`"
                      :extend-key-name="`${item.selectTypeName}`"
                      :label-name="item.selectLabelName"
                      :disabled="item.disabled"
                      :loadmore-method="getSelectOtions()"
                      :extend-class="'panel-auto-width'"
                      :collapse-tags="false"
                      :custom-label="true"
                      :need-loadmore="item.loadmore"
                      :hide-select-list="selectData[item.module][item.key] ? [selectData[item.module][item.key]] : []"
                      filterable
                      clearable
                      open-tool-tip
                      class="mobile-components"
                      style="width: 200px;"
                      @searchKeyword="setItemLoadmore($event, item)"
                    />
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">新建</span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item, index) in newSignUpOthers" :key="index" @click.native="toCreateItem(item)">{{ item.name }}</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </el-form-item>
              </div>
            </template>
          </template>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import XTitle from '@/components/Title';
import { hasRouteAuth } from '@/utils/permission';
import SelectGroupPrepend from '@/components/Common/selectGroupPrepend';
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';
import PeriodOfYear from './periodOfyear';
import PeriodOfSingle from './periodOfsingle';
import LegalCodeInput from './legalCodeInput';
import RelevanConstruct from './relevanConstruct';
import DeadlineSelect from './deadlineSelect';
import BaseAuthorRoyalty from './baseAuthorRoyalty';
import AuthorCommission from './authorCommission';
import StaffCooperSingleBuy from './staffCooperSingleBuy';
import StaffEntrustService from './staffEntrustService';
import OppCompanySelect from './oppCompanySelect';
import DateRangePicker from './dateRangePicker';
import OtherSelectGroup from './otherSelectGroup';
import CooperAccountSelect from './cooperAccountSelect';
import CheckboxInputs from './checkboxInputs';
import ECommerceGroup from './eCommerceGroup';
import DateMulPicker from './dateMulPicker';
import MoneyInvolved from './moneyInvolved';
import templateIcon from '@/assets/legal/template.png';
import { getDepartmentAll } from '@/api/config';
import { getSignUpOtherOptions } from '@/api/legal';
import { setLegalTypeState } from '@/filters/status';
import upAttachment from '@/components/Common/upAttachment/index';
import ThreeLevelArea from '@/components/ThreeLevelArea';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import { numerical } from '@/utils/numFormat.js';
import { showModal } from '@/utils/message';
import { ROLE_TYPE } from '@/utils/const/process';
import { supplierInfo, accountList } from '@/api/supplier';
import { CONTRACT_TYPE } from '@/utils/const/contract';
import math from '@/utils/math';
import { mapState } from 'vuex';

export default {
  name: 'DynamicLegalCreate',
  components: {
    XTitle,
    SelectGroupPrepend,
    SelectWithUserLoad,
    PeriodOfYear,
    PeriodOfSingle,
    LegalCodeInput,
    upAttachment,
    ThreeLevelArea,
    selectWithoutHttp,
    RelevanConstruct,
    DeadlineSelect,
    BaseAuthorRoyalty,
    AuthorCommission,
    StaffCooperSingleBuy,
    StaffEntrustService,
    OppCompanySelect,
    DateRangePicker,
    OtherSelectGroup,
    CooperAccountSelect,
    CheckboxInputs,
    ECommerceGroup,
    DateMulPicker,
    MoneyInvolved
  },
  filters: {
    setLegalTypeState
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    /** constructions 的结构为
    * interface Constructions{
    *   title: string,
    *   key: string,
    *   children: ({
          label: string,
          placeholder: string,
          type: string, // 输入框类型 ‘preInput’,
          key: string,  // 上传接口的字段值
          module: string, // 模块名称 用于说明获取绑定值具体所在的模块
          option: array // 下拉框选项
        }[])[] // children 为一个二维数组 用于灵活的定义输入框需要在第几行
    * }
    * */
    constructions: {
      type: Array,
      default: () => {
        return null;
      }
    },
    params: { // 与提交接口保持一致
      type: Object,
      default: () => {
        return null;
      }
    },
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    defaultList: {
      type: Object,
      default: () => {
        return null;
      }
    },
    hideRequiredAsterisk: {
      type: Boolean,
      default: true
    },
    formWidth: {
      type: String,
      default: null
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    labelWidth: {
      type: String,
      default: '115px'
    },
    flowStructure: {
      type: Object,
      default: () => {
        return null;
      }
    },
    downloadLoading: {
      type: Boolean,
      default: true
    },
    lastTemplate: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      templateIcon,
      CONTRACT_TYPE,
      test: '',
      deptTreeList: null, // 所属部门
      cacheContractDate: {},
      cacheAuthorPayDate: {},
      cacheStaffCooperDate: {},
      showTemplatePanel: true,
      isPartTimeWorker: false, // 购销合同选中兼职人员合作
      newSignUpOthers: [
        { id: 0, name: '飞博供应商', pathName: 'supplierManage', auth: 'medium:supplier:edit', query: { toCreate: 1 }},
        { id: 1, name: '有赞供应商', pathName: 'commerceSupplierCreate', auth: 'crm:commerceSupplier:add' },
        { id: 2, name: '萌力供应商', pathName: 'mengliCreateSupplier', auth: 'mengli:supplier:create' },
        { id: 3, name: '销售客户', pathName: 'createCustomer', auth: 'crm:customer:add' },
        { id: 4, name: '萌力客户', pathName: 'createMengliCustomer', auth: 'mengli:customer:create' }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  watch: {
    // 购销合同判断是否选中兼职人员合作
    selectData: {
      handler(data) {
        if (
          this.type !== CONTRACT_TYPE.STAFF ||
          !data || !data['contractInfo'] ||
          !data['contractInfo']['cooperDate'] ||
          !data['contractInfo']['cooperDate'].type
        ) return;
        const { type } = data['contractInfo']['cooperDate'];
        this.isPartTimeWorker = type === 4;
        this.$emit('partTimeWorkerSelectChange', this.isPartTimeWorker);
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.queryDeptTreeList();
  },
  methods: {
    // 设置label是否置顶
    setLabelTopStatus(type) {
      // 高度可能会变化的类型
      const stickyTopArr = [
        'relevanceConstructCode',
        'textarea',
        'fileUpload',
        'legalDate',
        'autorPayDeadline',
        'checkboxInputs',
        'staffAdminCooperDate',
        'dateMulPicker',
        'moneyInvolved',
        'cooperAccountSelect'
      ];
      return stickyTopArr.includes(type);
    },
    // 非标准输入框宽度类型
    setTwoColBox(type) {
      const twoCols = [
        'textarea',
        'autorPayDeadline',
        'staffAdminCooperDate',
        'legalDate'
      ];
      return twoCols.includes(type);
    },
    // 获取一些可能有可能没有的值
    saveGetData(data, key, defaultData) {
      if (key in data) {
        return data[key];
      } else {
        return defaultData;
      }
    },
    getSelectTip(key, options = []) {
      if (!key) return '';
      const result = options.filter(item => item.value === key);
      const tipText = result.length && result[0].label || '';
      return !tipText || tipText.length < 15 ? '' : tipText;
    },
    getSearchOptionTip(data = {}, labelName = 'name') {
      if (!data || JSON.stringify(data) === '{}') return '请选择';
      return data[labelName] || '';
    },
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    complateSetData({ data, fileName }, item) {
      this.createLoading = false;
      const fileList = {
        name: fileName,
        url: data.url,
        time: new Date().getTime()
      };
      if (typeof data === 'string') {
        fileList.url = data;
      } else {
        fileList.url = data.url;
      }
      this.selectData[item.module][item.key].push(fileList);
      this.$refs['dynamicLegalCreate'].validateField(`contractInfo.${item.key}`);
    },
    removeFileList({ file, index }, item) {
      this.selectData[item.module][item.key].splice(index, 1);
      this.$refs['dynamicLegalCreate'].validateField(`contractInfo.${item.key}`);
    },
    validateField(rule) {
      this.$refs['dynamicLegalCreate'].validateField(rule);
    },
    changeMethod(value, item) {
      this.selectData[item.module][item.key + 'Id'] = value.id;
      const { departmentAry, post, avatar, userName } = value;
      this.selectData['createInfo']['post'] = post || '';
      this.selectData['createInfo']['proposerAvatar'] = avatar || '';
      this.selectData['createInfo']['departmentId'] = this.getFirstDepartment(departmentAry) || '';
      const proposer = {
        id: value.id,
        avatar: avatar,
        userName: userName,
        post
      };
      this.synchProposer(proposer);
    },
    // 获取用户第一个部门的第一个子级部门
    getFirstDepartment(list) {
      if (Array.isArray(list) && list.length) {
        const deptIdArr = list[0].id;
        if (Array.isArray(deptIdArr) && deptIdArr.length) {
          return deptIdArr[deptIdArr.length - 1];
        } else if (parseFloat(deptIdArr).toString() !== 'NaN') {
          return deptIdArr;
        } else {
          return null;
        }
      } else {
        return null;
      }
    },
    synchProposer(proposer) {
      const processArr = this.flowStructure && this.flowStructure.process || [];
      if (!this.selectData.aduitInfo || !Array.isArray(processArr) || !processArr.length) return;
      for (var s = 0; s < processArr.length; s++) {
        const process = processArr[s];
        for (var r = 0; r < process.examineRoles.length; r++) {
          const examineRole = process.examineRoles[r];
          if (examineRole.roleType === ROLE_TYPE.PROPOSER) {
            this.selectData.aduitInfo.process[s].examineRoles[r].aduitors = [proposer];
          }
        }
      }
    },
    legalDateTypeChange(value, item) {
      const emptyDate = {
        type: 1,
        legalDate: '', // 提交的时候需要删除
        startTime: '',
        endTime: '',
        stagesYearType: '',
        settleAccountPeriod: '',
        pushTime: '', // 单次类才有
        payWay: '', // 单次类才有
        items: [{ payDate: '' }]
      };
      if (value === 1) {
        this.cacheContractDate['2'] = JSON.parse(JSON.stringify(this.selectData[item.module][item.key]));
        this.cacheContractDate['2'].type = 2;
        if ('1' in this.cacheContractDate) {
          this.selectData[item.module][item.key] = this.cacheContractDate['1'];
        } else {
          emptyDate.type = 1;
          this.selectData[item.module][item.key] = emptyDate;
        }
      } else {
        this.cacheContractDate['1'] = JSON.parse(JSON.stringify(this.selectData[item.module][item.key]));
        this.cacheContractDate['1'].type = 1;
        if ('2' in this.cacheContractDate) {
          this.selectData[item.module][item.key] = this.cacheContractDate['2'];
        } else {
          emptyDate.type = 2;
          this.selectData[item.module][item.key] = emptyDate;
        }
      }
    },
    authorPayDateTypeChange(value, item) {
      const emptyDate = {
        type: 1,
        period: '', // 提成类才有
        payPeriod: '', // 提成类才有
        payWay: '', // 基础授权类才有
        payDates: [{ date: '' }] // 基础授权类才有
      };
      if (value === 1) {
        this.cacheAuthorPayDate['2'] = JSON.parse(JSON.stringify(this.selectData[item.module][item.key]));
        this.cacheAuthorPayDate['2'].type = 2;
        if ('1' in this.cacheAuthorPayDate) {
          this.selectData[item.module][item.key] = this.cacheAuthorPayDate['1'];
        } else {
          emptyDate.type = 1;
          this.selectData[item.module][item.key] = emptyDate;
        }
      } else {
        this.cacheAuthorPayDate['1'] = JSON.parse(JSON.stringify(this.selectData[item.module][item.key]));
        this.cacheAuthorPayDate['1'].type = 1;
        if ('2' in this.cacheAuthorPayDate) {
          this.selectData[item.module][item.key] = this.cacheAuthorPayDate['2'];
        } else {
          emptyDate.type = 2;
          this.selectData[item.module][item.key] = emptyDate;
        }
      }
    },
    staffCooperDateTypeChange(value, item) {
      const emptyDate = {
        type: value,
        payWay: '',
        deadlineType: '',
        accountPeriod: '',
        period: '',
        items: [{ payDate: '', timeType: '' }]
      };
      this.selectData[item.module][item.key] = emptyDate;
      // if (value === 1) {
      //   this.cacheStaffCooperDate['2'] = JSON.parse(JSON.stringify(this.selectData[item.module][item.key]));
      //   this.cacheStaffCooperDate['2'].type = 2;
      //   if ('1' in this.cacheStaffCooperDate) {
      //     this.selectData[item.module][item.key] = this.cacheStaffCooperDate['1'];
      //   } else {
      //     emptyDate.type = 1;
      //     this.selectData[item.module][item.key] = emptyDate;
      //   }
      // } else if (value === 2) {
      //   this.cacheStaffCooperDate['1'] = JSON.parse(JSON.stringify(this.selectData[item.module][item.key]));
      //   this.cacheStaffCooperDate['1'].type = 1;
      //   if ('2' in this.cacheStaffCooperDate) {
      //     this.selectData[item.module][item.key] = this.cacheStaffCooperDate['2'];
      //   } else {
      //     emptyDate.type = 2;
      //     this.selectData[item.module][item.key] = emptyDate;
      //   }
      // }
    },
    handleSwitchChange(e) {
      this.$emit('legalSwitchChange', e);
    },
    GMVTemplate(item) {
      const tempStr = `①阶梯式GMV激励：
月度实际GMV≤[  ]，激励比例为净利润的[  ]%；
[  ]＜月度实际GMV≤[  ]，激励比例为净利润的[  ]%；
月度实际GMV＞[  ]，激励比例为净利润的[  ]%；
②固定GMV激励：按乙方月度实际GMV净利润的[  ]%作为激励；
③无GMV激励。`;
      this.$set(this.selectData[item.module], item.key, tempStr);
    },
    showRadioItem(status, showType) {
      if (!showType) return true;
      return status === showType;
    },
    showItemByType(status, showType, label) {
      const map = ['应收合同金额', '应付合同金额'];
      if (map.includes(label)) {
        return status === showType;
      }
      return true;
    },
    threeLevelArea(data) {
      this.$emit('getProvice', data);
    },
    numberInputChange(value, selectData, m, key) {
      const formatValue = numerical(value, 3, 12);
      if (selectData[m][key]) selectData[m][key] = formatValue;
    },
    formatRatioVal(val, selectData, m, key, complementaryKey) { // complementaryKey 当前key互补计算的值100-currVal
      if (val) selectData[m][key] = Number(val).toFixed(2);
      if (complementaryKey) {
        const talentNum = !val && val !== 0 ? null : math.subtract(100, Number(val)).toFixed(2);
        this.$set(selectData[m], complementaryKey, talentNum);
      }
    },
    onAddClick() {
      this.$refs['commerceGroup'][0].add();
    },
    showTemplateDrawer() {
      this.$emit('showTemplateDrawer');
    },
    showPreviewDrawer() {
      this.$emit('showPreviewDrawer');
    },
    downloadTemplate(isFill = false) {
      this.$emit('downloadTemplate', null, isFill);
    },
    radioSelChange(data, item, e) {
      if (e && item.key === 'legalTemplate') {
        showModal('当选择"是"，<span style="color:red;"">则不可修改合同模板内容</span><br/>使用合同模板可加快审批流程', '重要提示',
          { dangerouslyUseHTMLString: true, showClose: true }).then(() => {
          this.$set(data[item.module], [item.key], e);
          // data[item.module][item.key] = e;
        }).catch(() => {
          this.$set(data[item.module], [item.key], 0);
          // data[item.module][item.key] = null;
        });
      }
    },
    getSelectOtions() {
      const a = function(params) {
        return new Promise((resolve, reject) => {
          getSignUpOtherOptions(params).then(res => {
            res.data && res.data.items && res.data.items.forEach(i => {
              i.uuid = i.id + '-' + i.type;
            });
            resolve(res);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    },
    toCreateItem(item) {
      if (item.auth && !hasRouteAuth(item.auth)) {
        this.$message.error(`您暂无新增${item.name}权限`);
        return;
      }
      const params = {
        name: item.pathName
      };
      if (item.query) {
        params.query = item.query;
      }
      const url = this.$router.resolve(params);
      window.open(url.href, '_blank');
    },
    setItemLoadmore(val, item) {
      item.loadmore = !!val;
    },
    selectItem(data, item) {
      // 电商产品购销类，当修改签约对方时，获取该供应商的收款信息，自动回填
      if (!data || !data.id || !item.isECommerce || ![0, 1, 2].includes(data.type)) return;
      // 供应商类型 item.type
      // 0: '飞博供应商',1: '有赞供应商',2: '萌力供应商',3: '销售客户',4: '萌力客户'
      if (data.type === 0) {
        supplierInfo(data.id).then(res => {
          if (res.code === 200 && res.data && res.data.accountsReceivable) {
            const supplierAccounts = res.data.accountsReceivable.list;
            if (supplierAccounts && supplierAccounts.length) {
              this.$emit('setSupplierAccount', supplierAccounts, () => {
                if (this.$refs.selectInputBlurRef) {
                  const selectInputBlurRef = Array.isArray(this.$refs.selectInputBlurRef) ? this.$refs.selectInputBlurRef[0] : this.$refs.selectInputBlurRef;
                  if (selectInputBlurRef)selectInputBlurRef.inputBlur();
                }
              });
            }
          }
        });
      } else if (data.type === 2 || data.type === 1) {
        const params = {
          id: data.id,
          type: data.type === 1 ? 3 : 2,
          supplierId: data.id,
          page: 1,
          perPage: 50
        };
        accountList(params).then(res => {
          if (res.code === 200 && res.data && res.data.items.length) {
            this.$emit('setSupplierAccount', res.data.items);
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.legal-module {
  margin-top: 12px;
  .options-btn-group {
    position: absolute;
    right: 0;
    .option-btn {
      padding-left: 12px;
      padding-right: 12px;
    }
  }
  .radio-info-tip {
    width: 14px;
    display: inline-block;
    vertical-align: top;
    margin-left: 4px;
  }
}
.legal-module-item {
  display: flex;
  flex-wrap: wrap;
  .template-download {
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    padding-top: 2px;
    .download-box {
      display: flex;
      position: relative;
      .download-title {
        color: #406eff;
        font-size: 14px;
        min-width: 7.5em;
        cursor: pointer;
      }
      .download-content-box {
        min-width: 260px;
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        padding: 2px 12px 12px;
        transform: translateY(-50%);
        filter: drop-shadow(2px 4px 13px rgba(221,225,234,1));
        z-index: 2;
        background-color: #fff;
        border-radius: 4px;
        .download-content {
          position: relative;
          .label {
            width: 5em;
            color: #999;
            text-align: right;
            padding-right: 10px;
          }
          .close-icon {
            position: absolute;
            right: -12px;
            top: 0;
            transform: translate(50%, -50%);
            color: #666;
            font-size: 20px;
          }
          .close-icon:hover {
            color: #406eff;
            cursor: pointer;
          }
        }
      }
      .download-content-box::after {
        content: '';
        position: absolute;
        left: -15px;
        top: 50%;
        border: 8px solid transparent;
        border-right-color: #fff;
        transform: translateY(-50%);
        z-index: 3;
      }
    }
  }
}
.legal-module:first-child {
  margin-top: 0px;
}
.input-group {
  display: flex;
  flex-direction: column;
  .tip {
    font-size: 12px;
    color: #999999;
  }
}
.contract-type {
    border-radius: 10px;
    width: fit-content;
    padding: 2px 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    height: 20px;
    line-height: 16px;
  &.contract-type-1 {
    background-color: #FFF0FA;
    color: #FD6DD1;
  }
  &.contract-type-2 {
    background-color: #EFF4FF;
    color: #406EFF;
  }
  &.contract-type-3 {
    background-color: #E2F8F2;
    color: #31CC9C;
  }
  &.contract-type-4 {
    background-color: #F4F2FF;
    color: #A691FF;
  }
  &.contract-type-5 {
    background-color: #FFF2EB;
    color: #FD8546;
  }
  &.contract-type-6 {
    background-color: #FFF8EA;
    color: #FFBC3D;
  }
  &.contract-type-7 {
    background-color: #F2F8EC;
    color: #87BF69;
  }
  &.contract-type-8 {
    background-color: #EBF6FF;
    color: #48B8FF;
  }
  &.contract-type-9 {
    background-color: #F3F8E2;
    color: #91B125;
  }
}
.text-content {
  width: 240px;
}
.legal-module-row {
  align-self: center;
  margin-bottom: 24px;
  width: 33.3%;
  &::v-deep {
    .el-form-item__label {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
.legal-module-row-start {
  align-self: flex-start !important;
}
::v-deep .title-head {
  margin-bottom: 12px !important;
}
.legal-module-fill-line {
  width: 100%;
  margin-bottom: 24px;
}
.legal-module-line-feed {
  width: 50%;
}
.pre-input-item {
  margin-right: 41px;
}
.pre-input-item:last-child {
  margin-right: 0px;
}
.gray-label {
  ::v-deep .el-form-item__label {
    color: #999 !important;
  }
}
.money-involved-box {
  margin-top: -0.7em;
  ::v-deep .el-form-item__label {
    align-self: center;
  }
}
.legal-module-wrap {
  &.legal-form-box-right {
    .el-form-item__label {
      padding-right: 20 !important;
      padding-left: 0px;
      // text-align: right !important;
    }
    .is-required {
      .el-form-item__label {
        padding-left: 20 !important;
      }
    }
  }
  .template-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 12px;
    cursor: pointer;
  }
  & ::v-deep {
    .el-form-item {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      // &.normal-form-item {
        // margin-bottom: 32px;
      // }
    }
    .el-form-item__label {
      color: #666;
    }
    .el-form-item__content .text-content {
      color: #333;
      font-size: 14px;
    }
    .el-form-item__label, .el-form-item__content .text-content {
      // display: flex;
      //padding-top: 6px;
      line-height: 20px !important;
      flex-shrink: 0;
    }
    .el-select .el-input .el-select__caret {
      color: #333 !important;
    }
    .el-range-editor.el-input__inner {
      padding: 0 10px;
      color: #333;
    }
    .el-radio__label {
      font-size: 14px;
    }
    .date-time-picker {
      .el-input__inner {
        padding-left: 25px;
        color: #333;
      }
    }
    .el-input-group, .el-input {
      width: unset;
    }
    .el-input__inner {
      width: 240px;
      // max-width: 240px;
      // min-width: 140px;
      // width: calc(100vw * 0.12);
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      padding-left: 8px;
      border-color: #ddd;
      color: #333;
      &::-webkit-input-placeholder {
        color: #ddd !important;
      }
    }
    .el-textarea textarea::-webkit-input-placeholder {
      color: #ddd !important;
    }
    .el-range-input::-webkit-input-placeholder {
      color: #ddd !important;
    }
    .el-input--suffix .el-input__inner {
      color: #333;
      padding-right: 25px;
    }
    .el-input--prefix .el-input__inner {
      color: #333;
      padding-left: 30px;
    }
    .el-input__icon {
      line-height: 32px;
    }
    .form-textarea {
      .el-textarea__inner {
        max-width: 694px;
        min-width: 520px;
        width: calc(100vw * 0.35);
        height: 120px;
        padding-left: 8px;
        font-size: 14px;
      }
    }
    .GMV-class {
      .el-form-item__content {
        display: flex;
        align-items: flex-start;
      }
    }
    .pre-input-item {
      .text-content {
        width: 160px;
        // max-width: 160px;
        // min-width: 140px;
        // width: calc(100vw * 0.08);
      }
    }
    .el-input-group, .short-input {
      .el-input__inner {
        width: 160px;
        // max-width: 160px;
        // min-width: 140px;
        // width: calc(100vw * 0.08);
        background-color: #FAFAFC;
        color: #333;
      }
    }
    .el-input-group--prepend {
      .el-input-group__prepend {
        background-color: #fff;
        border-color: #ddd;
        color: #666;
      }
    }
    // .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
      // content: '';
      // margin-right: 0px;
    // }
  }
}
// .normal-form-item {
  // margin-right: calc(100vw * 0.05);
// }
.normal-form-item:last-child {
  margin-right: 0;
}
.legal-date-module {
  padding: 0 8px 20px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 2px;
}
.label-sticky-top {
  ::v-deep .el-form-item {
    align-items: flex-start !important;
  }
  ::v-deep .el-form-item__label {
    padding-top: 0.4em;
  }
  ::v-deep .input-group {
    .label-name {
    padding-top: 0.4em;
    }
  }
}
.date-radio-label {
  ::v-deep .el-form-item__label {
    padding-top: 0.1em;
  }
}
.radio-item {
  ::v-deep .el-form-item__content{
    display: flex;
    align-items: center;
  }
}
.flex {
  ::v-deep {
    .el-input__inner {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 66px !important;
    }
  }
}
.el-dropdown {
  border-left: 1px solid #ccc;
  height: 32px;
}
.el-dropdown-link {
  display: inline-block;
  width: 36px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #406eff;
  cursor: pointer;
}
@media screen and (max-width: 1366px) {
  .legal-module-row {
    width: 50%;
  }
}
@media screen and (min-width: 1366.1px) {
  .legal-module-contract-label-width:nth-child(3n + 2),
  .legal-module-create-label-width:nth-child(3n + 1) {
    ::v-deep .el-form-item {
      .el-form-item__label {
        width: 85px !important;
      }
    }
  }
}
@media screen and (max-width: 1366.1px) {
  .legal-module-contract-label-width,
  .legal-module-create-label-width {
    ::v-deep .el-form-item {
      .el-form-item__label {
        width: 115px !important;
      }
    }
  }
  .legal-module-contract-label-width:nth-child(2n),
  .legal-module-contract-label-width:nth-last-child(1),
  .legal-module-create-label-width:nth-child(2n + 1) {
    ::v-deep .el-form-item {
      .el-form-item__label {
        max-width: 85px;
      }
    }
  }
}
// @media screen and (max-width: 1297px) {
//   .normal-form-item {
//     margin-right: calc(100vw * 0.01);
//   }
//   .legal-date-module {
//     padding: 16px 0px 16px 12px;
//   }
//   .pre-input-item {
//     margin-right: 30px;
//   }
// }
// @media screen and (min-width: 1297px) and (max-width: 1380px) {
//   .normal-form-item {
//     margin-right: calc(100vw * 0.02);
//   }
//   .legal-date-module {
//     padding: 16px 0px 16px 14px;
//   }
// }
// @media (min-width: 1960px){
//   .normal-form-item {
//     margin-right: 120px;
//   }
// }
.hover-icon {
  color: #999;
  &:hover {
    color: #406eff;
  }
}
</style>
<style lang="scss">
.radio-tip {
  span{
    color: yellow;
    font-weight: bolder;
  }
}
.mobile-legal-create {
  margin: 0 !important;
  .legal-module-row {
    width: 100% !important;
    margin-bottom: 20px;
  }
  .hide-item {
    display: none;
  }
  .legal-module-row, .legal-module-fill-line {
    .el-form-item {
      .el-form-item__label {
        width: 100px !important;
        max-width: unset !important;
      }
      .el-form-item__content {
        width: 100% !important;
      }
    }
    .mobile-create-flex {
      .el-form-item__label {
        width: 100% !important;
      }
      .mobile-create-radio-group {
        .el-radio {
          margin: 8px 0;
        }
      }
      .download-content-box {
        left: 25px !important;
        z-index: 99 !important;
      }
    }
  }
  .el-form-item {
    width: 100%;
    margin-right: 0;
  }
  .form-textarea {
    .el-textarea__inner {
      min-width: unset !important;
    }
  }
  .template-download {
    position: unset !important;
  }
}
</style>
